<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <style>
        /* 登录链接样式 */
        .login-link {
            position: absolute; /* 绝对定位 */
            top: 10px; /* 距离顶部 10px */
            right: 10px; /* 距离右侧 10px */
            text-decoration: none; /* 移除下划线 */
            color: blue; /* 文本颜色 */
        }
        .compute{
            position: absolute; /* 绝对定位 */
            top: 10px; /* 距离顶部 10px */
            right: 60px; /* 距离右侧 10px */
            text-decoration: none; /* 移除下划线 */
            color: blue; /* 文本颜色 */
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1; /* 层级 */
            left: 0; /* 位置左边距离 */
            top: 0; /* 位置上边距离 */
            width: 100%; /* 宽度 */
            height: 100%; /* 高度 */
            overflow: auto; /* 滚动条 */
            background-color: rgba(0,0,0,0.4); /* 背景颜色 */
            padding-top: 60px; /* 上边内边距 */
        }

        /* 模态框内容样式 */
        .modal-content {
            background-color: #fefefe; /* 背景颜色 */
            margin: 5% auto; /* 外边距，上下 5%，左右自动 */
            padding: 20px; /* 内边距 */
            border: 1px solid #888; /* 边框 */
            width: 30%; /* 宽度 */
            border-radius: 5px; /* 圆角边框 */
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* 阴影效果 */
            animation-name: animatetop; /* 动画名称 */
            animation-duration: 0.4s; /* 动画持续时间 */
        }

        @keyframes animatetop {
            from {top: -300px; opacity: 0} /* 起始位置 */
            to {top: 0; opacity: 1} /* 结束位置 */
        }

        /* 定义容器样式，使其内容居中显示 */
        .container {
            display: flex;
            justify-content: center;
            height: 100vh; /* 让容器铺满整个视口高度 */
        }

        form {
            text-align: center;
        }

    </style>

</head>
<body>
<div class="content">
    <!-- 标题 -->
    <h2 style="text-align: center;margin-top: 5%;">学生管理系统</h2>

    <!-- 登录链接 -->
    <a href="#" class="login-link" onclick="openModal()">登录</a>
    <a href="#" class="compute" onclick="openComputeModal()">计算</a>

    <!-- 模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h3 style="text-align: center;">登录</h3>
            <form action="login" method="post" accept-charset="UTF-8">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username"><br><br>

                <label for="password">密码：</label>
                <input type="password" id="password" name="password"><br><br>

                <input type="submit" name="action" value="登录">
                <button onclick="closeModal()">取消</button>
            </form>
        </div>
    </div>
    <div id="computeModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeComputeModal()">&times;</span>
            <h3 style="text-align: center;">计算</h3>
            <form action="#" method="post" accept-charset="UTF-8">
                <label for="num1">第一个数：</label>
                <input type="text" id="num1" name="num1"><br><br>

                <label for="num2">第二个数：</label>
                <input type="text" id="num2" name="num2"><br><br>

                <label for="result">结果：</label>
                <input type="text" id="result" name="result" readonly><br><br>

                <input type="button" onclick="calculateResult()" value="计算" class="center-align">
                <button onclick="closeComputeModal()">取消</button>
            </form>
        </div>
    </div>
    <%
        // 获取session中的属性
        String username = (String)request.getAttribute("username");
        String student_id="";
        String student_name="";
        String student_age="";
        if("编辑".equals(username)) {
            student_id = (String) request.getAttribute("student_id");
            student_name = (String) request.getAttribute("student_name");
            student_age = (String) request.getAttribute("student_age");
        }
    %>
    <!-- 学员信息表单 -->
    <div class="container">
        <form action="login" method="post" accept-charset="UTF-8">
            <!-- 添加学员信息输入框 -->
            <label for="student_id">学员编号：</label>
            <input type="text" id="student_id" name="student_id" value="<%= student_id %>"><br><br>

            <label for="student_name">学员姓名：</label>
            <input type="text" id="student_name" name="student_name" value="<%= student_name %>"><br><br>

            <label for="student_age">学员年龄：</label>
            <input type="text" id="student_age" name="student_age" value="<%= student_age %>"><br><br>

            <% if("编辑".equals(username)){ %>
            <!-- 添加按钮 -->
            <input type="submit" name="action" value="成功" class="center-align">
            <% }else { %>
            <!-- 编辑确认按钮 -->
            <input type="submit" name="action" value="添加" class="center-align">
            <% } %>
        </form>
    </div>
</div>
<script type="text/javascript">
    // 打开登录模态框
    function openModal() {
        var modal = document.getElementById("loginModal");
        modal.style.display = "block";
    }

    // 关闭登录模态框
    function closeModal() {
        var modal = document.getElementById("loginModal");
        modal.style.display = "none";
    }

    // 点击模态框外部区域关闭模态框
    window.onclick = function(event) {
        var loginModal = document.getElementById("loginModal");
        if (event.target == loginModal) {
            loginModal.style.display = "none";
        }

        var computeModal = document.getElementById("computeModal");
        if (event.target == computeModal) {
            computeModal.style.display = "none";
        }
    }

    // 打开计算模态框
    function openComputeModal() {
        var modal = document.getElementById("computeModal");
        modal.style.display = "block";
    }

    // 关闭计算模态框
    function closeComputeModal() {
        var modal = document.getElementById("computeModal");
        modal.style.display = "none";
    }

    // 计算输入框中两个数的和
    function calculateResult() {
        var num1 = parseFloat(document.getElementById("num1").value);
        var num2 = parseFloat(document.getElementById("num2").value);
        var result = num1 + num2;
        document.getElementById("result").value = result;
    }
</script>

</body>
</html>
